<template>
  <el-dialog
    ref="formDlg"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="85%"
    append-to-body
    @close="closeDialog"
  >
    <template #title>
      <div style="font-size:14px;font-weight:bold">
        {{ '所选区域：'+ format(areaZone)||'-' }}
        <span style="color:#999">(申请面积--{{ getAreaData(areaZone) }}㎡)</span>
      </div>
    </template>
    <Soft v-if="areaZone==='Q014'" :program-id="programId" :init-programs="initPrograms" :area="shopTotalArea.softwareArea" @select="getSelectDetail" />
    <Product v-if="areaZone==='Q015'" :program-id="programId" :init-programs="initPrograms" :area="shopTotalArea.suiteArea" @select="getSelectDetail" />
    <Customized v-if="areaZone==='Q002'" :init-programs="initPrograms" @select="getSelectDetail" />
    <Cupboard v-if="areaZone==='Q003'" :init-programs="initPrograms" @select="getSelectDetail" />
    <BathRoom v-if="areaZone==='Q004'" :init-programs="initPrograms" @select="getSelectDetail" />
    <Model v-if="areaZone==='Q005'" :init-programs="initPrograms" @select="getSelectDetail" />
    <Scene v-if="areaZone==='Q019'" :init-programs="initPrograms" @select="getSelectDetail" />
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="isDrawSelectProgram">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Scene from './regionOptions/scene'// 情景间
import Soft from './regionOptions/soft'// 软体
import Product from './regionOptions/product'// 成品
import Model from './regionOptions/model'// 样板间
import Customized from './regionOptions/customized'// 全屋定制
import Cupboard from './regionOptions/cupboard'// 橱柜
import BathRoom from './regionOptions/bathRoom'// 卫浴
// import { getDictByPatchType } from '@/api/dataDict'

export default {
  name: 'AddRegion',
  components: { Product, Model, Customized, Cupboard, BathRoom, Soft, Scene },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    shopTotalArea: {
      type: Object,
      default: () => {}
    },
    initPrograms: {// 父组件中已选择的方案
      type: Array,
      default: () => []
    },
    programId: {
      type: String,
      default: ''
    },
    areaZone: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      areaOptions: [{ dictCode: 'Q002', dictName: '全屋定制' },
        { dictCode: 'Q003', dictName: '整体橱柜' },
        { dictCode: 'Q004', dictName: '卫浴' },
        { dictCode: 'Q005', dictName: '样板间' },
        { dictCode: 'Q014', dictName: '软体' },
        { dictCode: 'Q015', dictName: '套房' },
        { dictCode: 'Q019', dictName: '情景间' }
      ], // 设计专区数据字典
      selectedProgram: []
    }
  },

  async created() {

  },

  methods: {
    getAreaData(data) {
      if (data === 'Q002') return this.shopTotalArea.wholeHouseCustomizedArea
      if (data === 'Q003') return this.shopTotalArea.wholeCabinetArea
      if (data === 'Q004') return this.shopTotalArea.bathroomArea
      if (data === 'Q005') return this.shopTotalArea.sampleRoomArea
      if (data === 'Q014') return this.shopTotalArea.softwareArea
      if (data === 'Q015') return this.shopTotalArea.suiteArea
      if (data === 'Q019') return this.shopTotalArea.sceneArea
    },
    getSelectDetail(data) {
      this.selectedProgram = data
    },

    closeDialog() {
      this.$emit('update:visible', false)
      this.$set(this, 'programsZoneOption', [])
    },
    format(data) {
      const tempArr = this.areaOptions.filter(el => el.dictCode === data)
      if (tempArr.length > 0) return tempArr[0].dictName
    },
    isDrawSelectProgram() {
      if (this.selectedProgram.length === 0) {
        this.$emit('selectprograms', this.initPrograms)
        this.closeDialog()
        return
      }
      // const noSelectList = this.selectedProgram.filter(row => row.checked && row.selectItem.length === 0)
      // if (noSelectList.length > 0) {
      //   const list = noSelectList.map(v => { return v.spaceName })
      //   this.$message.warning(`【${list.toString()}】存在未选择的系列`)
      //   return
      // }
      const allSelectItems = []
      const areaName = this.selectedProgram[0] && this.selectedProgram[0].areaCode
      let spaceAareaTotal = 0
      if (areaName === 'Q019' || areaName === 'Q002' || areaName === 'Q003') {
        this.selectedProgram.forEach(el => {
          if (el.actualReportArea && el.selectItem.length > 0) {
            spaceAareaTotal = spaceAareaTotal + el.actualReportArea
          }
        })
        // if (!validate) {
        //   this.$message.warning('所选空间下存在未填写或为0的实际报图面积')
        //   return
        // }
      }

      this.selectedProgram.forEach(el => {
        el.selectItem.forEach(row => {
          if (areaName === 'Q002') {
            this.$set(row, 'seriesRecommendedLevel', row.seriesRecommendedLevel || row.recommendLevel)
            this.$set(row, 'seriesStandardColor', row.standardColor || row.seriesStandardColor)
            this.$set(row, 'actualReportArea', el.actualReportArea)
            this.$set(row, 'actureApplySampleSpace', row.actureApplySampleSpace || [])
            this.$set(row, 'cabinetColorName', row.cabinetColorName || [])
            this.$set(row, 'doorColorName', row.doorColorName || [])

            this.$set(row, 'spaceName', el.spaceName)
            this.$set(row, 'adviceSampleArea', el.adviceSampleArea)
            this.$set(row, 'spaceReportArea', el.spaceReportArea || el.actualReportArea)
            this.$set(row, 'spaceDesc', el.spaceDesc)
          }
          if (areaName === 'Q003') {
            this.$set(row, 'spaceName', el.spaceName)
            this.$set(row, 'seriesRecommendedLevel', row.seriesRecommendedLevel || row.recommendLevel)
            this.$set(row, 'suitDesignWay', el.suitDesignWay)
            // this.$set(row, 'currentApplyDesignWay', el.currentApplyDesignWay || [])
            this.$set(row, 'actualReportArea', el.actualReportArea)
            this.$set(row, 'spaceReportArea', el.spaceReportArea || el.actualReportArea)
            this.$set(row, 'adviceSampleArea', el.adviceSampleArea)
            this.$set(row, 'spaceDesc', el.spaceDesc)
          }
          if (areaName === 'Q005') {
            this.$set(row, 'spaceName', el.spaceName)
            this.$set(row, 'styleDesc', el.styleDesc)
            this.$set(row, 'houseType', el.houseType)
            this.$set(row, 'houseTypePosition', el.houseTypePosition)
            this.$set(row, 'adviceSampleArea', el.adviceSampleArea)
            this.$set(row, 'spaceDesc', el.spaceDesc)
          }
          if (areaName === 'Q014' || areaName === 'Q015' || areaName === 'Q004') {
            this.$set(row, 'spaceName', el.spaceName)
            this.$set(row, 'adviceSampleArea', el.adviceSampleArea)
            this.$set(row, 'spaceDesc', el.spaceDesc)
            this.$set(row, 'actualAreaSum', el.actualAreaSum)
            this.$set(row, 'seriesReportArea', row.seriesReportArea || row.actualReportArea || 0)
            this.$set(row, 'spaceReportArea', el.spaceReportArea || el.actualAreaSum)
          }

          if (areaName === 'Q019') {
            this.$set(row, 'spaceName', el.spaceName)
            this.$set(row, 'spaceDesc', el.spaceDesc)
            this.$set(row, 'customProductDesc', row.customizedProductDesc || row.customProductDesc)
            this.$set(row, 'actualReportArea', el.actualReportArea)
            this.$set(row, 'spaceReportArea', el.spaceReportArea || el.actualReportArea)
          }

          this.$set(row, 'spaceCode', el.spaceCode)
          allSelectItems.push(row)
        })
      })

      if (areaName === 'Q002') { // 全屋定制
        // const tempArr = allSelectItems.filter(el => !el.actureApplySampleSpace || el.actureApplySampleSpace.length === 0)
        // if (tempArr.length > 0) {
        //   this.$message.warning(`所选空间下存在未选择的实际上样空间，请检查`)
        //   return
        // }
        allSelectItems.forEach(v => {
          this.$set(v, 'actureApplySampleSpace', (v.actureApplySampleSpace && v.actureApplySampleSpace.join(',')) || '')
          this.$set(v, 'cabinetColorName', (v.cabinetColorName && (typeof (v.cabinetColorName) === 'string' ? v.cabinetColorName : v.cabinetColorName.join(',')) || ''))
          this.$set(v, 'doorColorName', (v.doorColorName && (typeof (v.doorColorName) === 'string' ? v.doorColorName : v.doorColorName.join(',')) || ''))
        })
      }

      if (areaName === 'Q004') { // 卫浴
        // const tempArr = allSelectItems.filter(el => el.suitDesignWay === 'W_A' && !el.actualReportArea)
        // if (tempArr.length > 0) {
        //   this.$message.warning(`所选空间下存在未填写或0的面积，请检查`)
        //   return
        // }
      }
      if (areaName === 'Q014' || areaName === 'Q015') { // 软体/套房
        // const tempArr = allSelectItems.filter(el => !el.actualReportArea)
        // if (tempArr.length > 0) {
        //   this.$message.warning(`所选空间下存在未填写或0的面积，请检查`)
        //   return
        // }
        allSelectItems.forEach(v => {
          this.$set(v, 'chooseCustomizedSeriesName', (v.chooseCustomizedSeriesName && v.chooseCustomizedSeriesName.join(',')) || '')
          this.$set(v, 'chooseCupboardSeriesName', (v.chooseCupboardSeriesName && v.chooseCupboardSeriesName.join(',')) || '')
        })
      }
      const dataList = this.sortArr(allSelectItems, 'spaceName').flat(Infinity)
      this.$emit('selectprograms', dataList)
      this.closeDialog()
    },
    sortArr(arr, str) {
      var sortArr = []
      var newArr = []
      // 临时的变量
      var tmp
      // 按照特定的参数将数组排序将具有相同值得排在一起
      arr = arr.sort(function(a, b) {
        var s = a[str]
        var t = b[str]
        return s < t ? -1 : 1
      })
      if (arr.length) {
        tmp = arr[0][str]
      }
      for (var i in arr) {
        if (arr[i][str] === tmp) {
          newArr.push(arr[i])
        } else {
          tmp = arr[i][str]
          sortArr.push(newArr)
          newArr = [arr[i]]
        }
      }
      // 将最后的内容推出新数组
      sortArr.push(newArr)
      return sortArr
    }
  }
}
</script>

<style lang='scss' scoped>
.no-data{
  color: #999;
  line-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pro-box{
  border-bottom: 1px solid #DCDFE6 ;
  height: 40px;
  cursor: pointer;
  line-height: 40px;
}
.selected{
  background-color: $qup-color-hover;
}
.el-divider--horizontal{
  margin: 10px 0;
}
  .table-main{
    width: 100%;
    display: flex;
    height: 430px;
    .table-left{
      height: 500px;
      width: 20%;
      flex:1;
      overflow: scroll;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .table-right{
      // height: 500px;
      width:80%;
      padding-left: 10px;
      .qup-title-box{
        line-height: 28px;
        height: 28px;
        margin-bottom: 10px;
      }
      .table-list-box{
        margin-top: 0;
      }
    }
  }
</style>
